<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>宠物税缴纳证书</title>
    <link rel="stylesheet" href="style.css">
    <script src="./html2canvas.min.js"></script>
    <style>

        .export {
            position: fixed;
            bottom: 10px;
        }
        #cer {
            width: 100%;
        }
    </style>
    <!-- <script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"></script>
    <script>
      // VConsole will be exported to `window.VConsole` by default.
      var vConsole = new window.VConsole();
    </script> -->
</head>

<body>
    <img id="cer"/>
    <div class="certificate-container" id="certificate-container">
        <div class="watermark">
            <!-- <span class="watermark-text">小红书社区</span> -->
        </div>
        <div class="header">
            <div class="logo">
                <img src="xiaohongshu-hui.png" alt="小红书logo">
            </div>
            <div class="title">
                <h1>CERTIFICATE</h1>
                <div>Pet Tax Payment Confirmation</div>
            </div>
        </div>
            <div class="content" id="content">
                <div class="title-wrapper wrapper">
                    <div class="zh">兹证明：</div>
                    <div class="en">This Certifies That:</div>
                </div>
    
                <div id="name"></div>
    
                <div class="success-wraaper wrapper">
                    <div class="zh">已成功缴纳宠物税</div>
                    <div class="en">Has Successfully Paid The Pet Tax</div>
                </div>
                <div class="result-wrapper wrapper">
                    <div class="zh">提交的宠物照片/视频已被认可，</div>
                    <div class="en">The Submitted Pet Photo/Video Has Been Accepted,</div>
                </div>
                <div class="xuke-wrapper wrapper">
                    <div class="zh">此账号已获得继续在本平台活动的许可证</div>
                    <div class="en">And This Account Is Now Authorized To Continue Activities On This Platform.</div>
                </div>
                
                <div class="notice-wrapper wrapper">
                    <div class="zh">请注意，定期缴纳“宠物税”有助于维持良好的社区氛围。</div>
                    <div class="en">Please Note That Regular “Pet Tax” Payments Help Maintain A Positive Community Atmosphere.</div>
                </div>
                
                <div class="footer">
                    <div class="collector">
                        <p class="bottom_title">收取机构/Collector:</p>
                        <p>小红书社区</p>
                        <p>RedNote Community</p>
                    </div>
                    <div class="date">
                        <p class="bottom_title">生效日期/Effective Date:</p>
                        <p>即刻生效</p>
                        <p>Be Effective Immediately</p>
                    </div>
                    <div class="seal">
                        <p class="bottom_title">确认盖章/Confirmation Sealnw:</p>
                        <img src="panda.png" alt="确认印章">
                        
                    </div>
                </div>
            </div>
    </div>
</body>

<script>
   
    function getUrlParams() {
            // 获取当前页面的 URL
            var url = window.location.href;
            // 创建一个 URLSearchParams 对象，用于解析 URL 中的查询参数
            var urlParams = new URLSearchParams(url.split('?')[1]);
            var params = {};
            // 遍历 URLSearchParams 对象，将参数存储到 params 对象中
            for (var [key, value] of urlParams) {
                params[key] = value;
            }
            return params;
    }

    document.getElementById("name").innerHTML = getUrlParams()["name"]
    
</script>
<script>
    window.onload = ()=>{
        document.getElementById("cer").style.display = "none"
        setTimeout(onExport, 100)
    }
    function onExport(){
        html2canvas(document.querySelector("#certificate-container")).then(canvas => {
            var dataURL = canvas.toDataURL('image/png');
            // // location.href = dataURL
            // var newTab = window.open();
            // newTab.document.write('<img src="' + dataURL + '" alt="Screenshot">');

            document.getElementById("cer").src = canvas.toDataURL("image/png")
            document.querySelector("#certificate-container").style.display = "none"

            document.getElementById("cer").style.display = "block"
            
    })

    };
</script>
</html>